import React, { useContext, useMemo } from 'react';

import { IFirstStepError } from '../type';
import { UploadContext } from '../useUploadModal';
import MyIcon from '@/components/MyIcon';

import cls from 'classnames';
import '../index.less';
import { Empty, Alert, Spin } from 'antd';

export const SecondStepError: React.FC<IFirstStepError> = ({ prefix }) => {
  const contentPrefix = prefix + '-content';

  const { uploadInfo, current, uploadLoading } = useContext(UploadContext);

  const upload = useMemo(() => {
    return {
      correctNum: uploadInfo?.correctNum,
      dataList: uploadInfo?.dataList,
      errorList: uploadInfo?.errorList,
      errorNum: uploadInfo?.errorNum,
    };
  }, [uploadInfo]);

  return (
    <div
      className={cls(contentPrefix + '-body')}
      style={{ display: current === 1 ? 'block' : 'none' }}
    >
      <Spin spinning={uploadLoading}>
        <Alert
          message="点击下一步只导入正常条数的信息"
          type="warning"
          showIcon
        />
        <div className={cls(prefix + '-card')} style={{ marginTop: '1rem' }}>
          <div className={cls(prefix + '-card-icon')}>
            <MyIcon type={'icon-yichang'} />
          </div>
          <div className={cls(prefix + '-card-error')}>
            <div className={cls(prefix + '-card-error-title')}>
              <span>正常条数：</span>
              <span style={{ color: 'green' }}>{upload?.correctNum}条</span>
            </div>
            <div className={cls(prefix + '-card-error-title')}>
              <span>异常条数：</span>
              <span style={{ color: 'red' }}>{upload?.errorNum}条</span>
            </div>
          </div>
        </div>
        <div className={cls(prefix + '-card')}>
          <div className={cls(prefix + '-card-info')}>
            <div className={cls(prefix + '-card-info-title')}>提示信息：</div>
            {upload?.errorList && upload?.errorList?.length > 0 ? (
              <>
                {upload.errorList?.map((item: any, index: number) => {
                  return (
                    <p
                      key={index}
                      style={{
                        fontSize: '.75rem',
                        color: '#666666',
                      }}
                    >
                      {item}
                    </p>
                  );
                })}
              </>
            ) : (
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="暂无信息"
              />
            )}
          </div>
        </div>
      </Spin>
    </div>
  );
};
